<!-- 用户信息配置页面 -->
<template>
    <div class="container-middle">
        <el-tabs
            tab-position="left"
            class="setting-tabs"
            v-model="currentPage"
            @tab-click="tabClick"
        >
            <el-tab-pane
                v-for="item in tabOptions"
                :key="item.value"
                :label="item.name"
                :name="item.value"
            >
                <el-breadcrumb class="setting-breadcrumb">
                    <el-breadcrumb-item to="/">返回个人信息</el-breadcrumb-item>
                    <el-breadcrumb-item>{{ item.name }}</el-breadcrumb-item>
                </el-breadcrumb>
                <RouterView :name="item.value"></RouterView>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="ts" setup>
import { TabsPaneContext } from 'element-plus'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
// 获取路由信息，设置选中的tab
const { params } = route
const pageId: string = params.pageId as string
// tab数据
const tabOptions = [
    {
        name: '个人资料',
        value: 'profile',
    },
    {
        name: '账号设置',
        value: 'account',
    },
    {
        name: '修改密码',
        value: 'password',
    },
    {
        name: '隐私设置',
        value: 'privacy',
    },
    {
        name: '屏蔽管理',
        value: 'block',
    },
]

// 跳转页面
const currentPage = ref<string>(pageId || 'profile')
const tabClick = (tab: TabsPaneContext) => {
    router.push({
        path: `/user/settings/${tab.props.name}`,
    })
}
</script>

<style lang="less" scoped>
.setting-tabs {
    width: 100%;
    height: 600px;
    min-height: 600px;
    --el-tabs-header-height: 30px;
    :deep(.el-tabs__nav-wrap) {
        margin-right: 0;
        &:after {
            display: none;
        }
        .el-tabs__nav {
            background-color: var(--color-white);
            border-radius: 10px;
            padding: 15px 0;
            .el-tabs__active-bar {
                left: 0;
                height: 30px !important;
                width: 3px;
            }
            .el-tabs__item {
                margin: 5px 0;
                font-size: var(--font-size-medium-x);
                color: var(--color-text-l);
                &.is-active {
                    color: var(--color-primary);
                }
            }
        }
    }
    :deep(.el-tabs__content) {
        background-color: var(--color-white);
        border-radius: 10px;
        padding: 30px;
        height: 100%;
    }
    .setting-breadcrumb {
        margin-bottom: 30px;
        color: var(--color-text-p);
    }
}
</style>
